<template>

	<view class="layout">
		<view class="layout-head">
			<Search @onConfirm="onConfirm" v-model="query" :showIcon="false"></Search>
			<u-tabs :list="NavList" :is-scroll="false" :current="navCurrentIndex" @change="changeNav"></u-tabs>
			<view class="dropdown" v-show="ShowDropdown">
				<u-dropdown @close="onCloseDropDown">
					<u-dropdown-item :height="dropHeight" v-model="searchParams.state" :title="DropTitle" :options="DropItemList.repairState.list"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view class="layout-body">
			<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<FactoryCard v-for="item  in data" :key="row.serialVersionUID" :type="navCurrentCode" :data="item"> </FactoryCard>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import FactoryCard from '@/components/card/sendRepair/factory/index.vue'
	import Search from '@/components/input/index.vue'
	import RepairApi from '@/apis/repair.js'
	import { dicList } from '@/filter/index.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			FactoryCard,
			Search,
		},
		computed: {
			RepairState() {
				let result = this.repairState
				result.unshift({
					label: '全部状态',
					value: ''
				})
				return result
			},


			DropTitle() {
				let obj = this.RepairState.find((item) => {
					if (item.value === this.searchParams.state) {
						return item
					}
				})
				return obj.label
			},
			ShowDropdown() {
				return [0].includes(this.navCurrentIndex)
			},
			DropItemList() {
				return {
					repairState: {
						title: '全部状态',
						list: this.RepairState
					}
				}
			},
			NavList() {
				// 查询模板 1报价2取货3维修4送回
				return [{
						name: '报价',
						count: this.redNum.quote,
						temp: "1",
						code: 'quote'
					},
					{
						name: '取货',
						count: this.redNum.pickUp,
						temp: "2",
						code: 'pickUp'
					},
					{
						name: '维修',
						count: this.redNum.repair,
						temp: "3",
						code: 'repair'
					},
					{
						name: '送回',
						count: this.redNum.return,
						temp: "4",
						code: 'return'
					},
				]
			}
		},

		data() {
			return {
				data: [],
				repairState: [{
						label: '待报价',
						value: 1
					},
					{
						label: '已报价',
						value: 2
					},
					{
						label: '报价待审核',
						value: 3
					},
					{
						label: '报价未通过',
						value: 4
					},
					{
						label: '待取走',
						value: 5
					},
					{
						label: '维修中',
						value: 6
					},
					{
						label: '放弃维修',
						value: 7
					},
					{
						label: '待确认送回科室',
						value: 8
					},
					{
						label: '配送中',
						value: 9
					},

				],
				dropHeight: 400,
				navCurrentIndex: 0,
				navCurrentCode: 'quote',
				initQueryParams: {
					template: '1',
					currentState: ''
				},
				redNum: {
					quote: '',
					pickUp: '',
					repair: '',
					return: ''
				},
				searchParams: {
					state: ''
				}
			}
		},

		onLoad(params) {
			this.initRedData()
		},
		methods: {
			async initRedData() {
				console.log('initRedData')
				let queryParams = {
					query: '',
					hospital: '',
					currentState: '',
					template: ''
				}
				let res = await RepairApi.factory.initRedNumData(queryParams)
				let vals = res.body
				this.$set(this.redNum, 'quote', vals.quoteCount)
				this.$set(this.redNum, 'pickUp', vals.pickCount)
				this.$set(this.redNum, 'repair', vals.repairCount)
				this.$set(this.redNum, 'return', vals.sendCount)
			},

			changeNav(index) {
				this.navCurrentIndex = index
				const { code, temp } = this.NavList[index]
				this.navCurrentCode = code
				this.$set(this.initQueryParams, 'currentState', '')
				this.$set(this.initQueryParams, 'template', temp)
				this.data = []
				this.initRedData()
				this.mescroll.resetUpScroll() // 再刷新列表数据

			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('upCallback')
				let query = {
					pageSize: page.size,
					pageNum: page.num,
					query: '',
				}
				Object.assign(query, this.initQueryParams)
				this.$nextTick(() => {
					this.$pop.ajaxPost(RepairApi.factory.initListName, query).then((res) => {
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态; 
						if (page.num == 1) this.data = []; //如果是第一页需手动制空列表
						if (res.code === 0) {
							let list = res.body.list || []
							// this.mescroll.endSuccess(list.length);
							this.mescroll.endByPage(list.length, res.body.total)
							if (list.length) {
								this.data = [...this.data, ...list]
							}
						}
					}).catch((err) => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				})

			},
			//点击空布局按钮的回调
			emptyClick() {

			},

			// 切换菜单
			tabChange() {

				this.initRedData()
				this.data = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},

			onCloseDropDown() {
				this.$set(this.initQueryParams, 'currentState', this.searchParams.state)
				this.mescroll.resetUpScroll() // 再刷新列表数据

			},
			onConfirm(val) {
				this.data = []
				this.$set(this.initQueryParams, 'query', val)
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
		}
	}
</script>

<style lang="scss">
	.dropdown {
		background-color: #fff;
	}

	/*根元素需要有固定的高度*/
	page {
		height: 100%;

		.layout {
			height: 100%;
			background-color: #F0F3F7;
			display: flex;
			flex-direction: column;

			&-body {
				padding: 0 30rpx;
				flex: 1;
				min-width: 0;
				min-height: 0;
				margin-bottom: 60rpx;

			}
		}
	}
</style>
